extends layout

append style
  link(rel="stylesheet", href="/docs/css/api.css")
  link(rel="stylesheet", href="/docs/css/inlinecpc.css")
  script(type="text/javascript" src="/docs/js/native.js")

  style.
    .api-nav .nav-item-sub {
      display: block !important;
    }

    .api-content {
      margin-top: 3em;
    }

block content
  h1 #{name}

  div.
    <div class="native-inline">
      <a href="#native_link#"><span class="sponsor">Sponsor</span> #native_company# — #native_desc#</a>
    </div>

  div.api-nav
    div.api-nav-content
      each item in docs
        - if (!item.hideFromNav || item.name === name)
          div.nav-item(id='nav-' + item.name)
            - if (item.name === name)
              div.nav-item-title(style="font-weight: bold")
                a(href=item.name.toLowerCase() + '.html')
                  | #{item.name}
              ul.nav-item-sub
                each prop in item.props
                  li
                    a(href='#' + prop.anchorId)
                      | #{prop.string}
            - else
              div.nav-item-title
                a(href=item.name.toLowerCase() + '.html')
                  | #{item.name}

  div.api-content
    ul
      each prop in props
        li
          a(href='#' + prop.anchorId)
            | #{prop.string}
    each prop in props
      hr.separate-api-elements
      h3(id=prop.anchorId)
        a(href='#' + prop.anchorId)
          | #{prop.string}
      if prop.param != null
        h5 Parameters
        ul.params
          each param in prop.param
            - if (param.nested)
              ul(style="margin-top: 0.5em")
                li
                  | #{param.name}
                  | <span class="method-type">&laquo;#{param.types}&raquo;</span> !{param.description}
            - else
              li.param
                | #{param.name}
                | <span class="method-type">&laquo;#{param.types}&raquo;</span> !{param.description}
      if prop.return != null
        h5 Returns:
        ul
          li <span class="method-type">&laquo;#{prop.return.types}&raquo;</span> !{prop.return.description}
      if prop.type != null && prop.type !== 'method' && prop.type !== 'function'
        h5 Type:
        ul
          li <span class="method-type">&laquo;#{prop.type}&raquo;</span>
      if prop.inherits != null
        h5 Inherits:
        ul
          li <span class="method-type">&laquo;#{prop.inherits}&raquo;</span>
      div
        | !{prop.description}  

  script.
    _native.init("CK7DT53U",{
      targetClass: 'native-inline'
    });
